<template>
  <div class="seller-box" ref="sellerBox"></div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, reactive, onUnmounted, useContext, watch } from 'vue'
import { useSeller } from '../hooks'

import WebSocketSerivce from '../utils/socket_service'

export default defineComponent({
    name: 'seller',
    setup() {
      
      const sellerBox = ref(null)
      const {setIntervalFn, initChart, getData, clear, screenAdapter} = useSeller(sellerBox)

      

      const { expose } = useContext()
      expose({
        screenAdapter
      })

      onMounted(async () => {
         WebSocketSerivce.instance.registerCallBack('sellerData', getData)
        initChart()
        // await getData()
        WebSocketSerivce.instance.send({
          action: 'getData',
          socketType: 'sellerData',
          chartName: 'seller',
          value: false
        })
        setIntervalFn()
        // 浏览器窗口改变 完成适配
        window.addEventListener('resize', screenAdapter)
        // 首次加载完成 完成屏幕的适配
        screenAdapter()
      }) 

      onUnmounted(() => {
        WebSocketSerivce.instance.unRegisterCallBack('sellerData')
        clear()
        // 注销适配事件
        window.removeEventListener('resize', screenAdapter)
      })
      return {
        sellerBox
      }
    }
})
</script>

<style lang="less" scoped>
.seller-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
